<%--
  Created by IntelliJ IDEA.
  User: Dell
  Date: 2021/12/12
  Time: 17:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>销售统计图标</title>
</head>
<body style="height: 100%; width: 95%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="../js/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: echarts.util.reduce(posList, function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };

    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            var labelOption = {
                normal: {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                }
            };
            myChart.setOption({
                series: [{
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }]
            });
        }
    };


    var labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
            name: {
                textBorderColor: '#fff'
            }
        }
    };

    option = {
        title: {
            text : '各类书籍统计情况'
        },
        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {                           //图例组件：展示不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示。
            data: ['历史', '童话','文学','科学','其他']
        },
        toolbox: {                  //工具栏（内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。）
            show: true,             //是否显示
            orient: 'vertical',     //排列方式为垂直排列
            left: 'right',          //显示的位置为右边
            top: 'center',          //显示的位置在中间
            feature: {                 //各工具的配置项
                //    mark: {show: true},
                dataView: {show: true, readOnly: false},      //数据视图展示
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']}, //动态类型的切换。
                restore: {show: true},                   //配置项还原（刷新）
                saveAsImage: {show: true}               //保存为图片
            }
        },

        xAxis: [
            {
                /*坐标轴类型：'value' 数值轴，适用于连续数据。
                'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
    'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
    'log' 对数轴。适用于对数数据。*/
                type: 'category',
                axisTick: {show: false},
                data: ['一季度', '二季度', '三季度', '四季度'],              //x轴的vlue.
                axisLabel:{                                                                                               //设置x轴数值
                    fontSize : '12'                                                                                //设置X轴字体大小
                }

            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [               //图标的系列。*这里包含两个系列，分别是排查和纳入。
            {
                name: '历史',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                data: [235, 332, 301, 334, 390]
            },
            {
                name: '童话',
                type: 'bar',
                label: labelOption,
                data: [220, 182, 191, 234, 290]
            },
            {
                name: '文学',
                type: 'bar',
                label: labelOption,
                data: [100, 152, 171, 234, 290]
            },
            {
                name: '科学',
                type: 'bar',
                label: labelOption,
                data: [156, 200, 324, 122, 245]
            },
            {
                name: '其他',
                type: 'bar',
                label: labelOption,
                data: [152, 130, 162, 323, 125]
            },
        ]
    };;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    };
    window.onresize=  function(){     //根据窗口大小自适应调整大小
        myChart.resize();
    }
</script>
</body>
</html>
